<template>
	<button @click="flag = true">显示猫</button>
	<button @click="flag = false">显示狗</button>
	<br/>
	<!-- 相对路径，同级别访问必须使用./ -->
	<!-- v-if是通过DOM增减元素实现的 -->
	<!-- <img id="img1" v-if="flag" src="./assets/img/cat.jpg"/>
	<img id="img2" v-else src="/src/assets/img/dog.jpg"/> -->
	
	<!-- @表示src -->
	<!-- v-show是通过CSS样式display是否为none来实现的 -->
	<img id="img1" v-show="flag" src="@/assets/img/cat.jpg"/>
	<img id="img2" v-show="!flag" src="@/assets/img/dog.jpg"/>
</template>

<script setup>
import { ref } from 'vue'
const flag = ref(true)
</script>

<style scoped>
	
</style>